<template>
  <Layout>
    <page-header :title="title"></page-header>
    <div>
      <Stat />
    </div>
    <div class="row">
      <div class="col-xl-9">
        <div
          class="sparklines card card-body"
          style="margin-top: 0px !important"
        >
          <h4
            class="card-title mb-4"
            style="font-size: 17px; margin-bottom: 0px !important"
          >
            24小时计算资源能耗走势
          </h4>
          <apexchart
            class="apex-charts"
            height="280"
            type="area"
            dir="ltr"
            :series="splineAreaChart.series"
            :options="splineAreaChart.chartOptions"
          ></apexchart>
        </div>
      </div>
      <div class="col-xl-3">
        <Stat2 />
      </div>
    </div>
    <div class="card col-12 seedbody card-body">
      <div class="all-products">全部信息</div>
      <div class="states-type">
        <div>
          <span class="type-title">实例类型:</span>
        </div>
        <div style="width:90%;">
          <button
            type="button"
            class="btn-item"
            :class="{ isActive: siteChange == item.index }"
            v-for="item in allSite"
            :key="item.index"
            @click="allSites(item)"
          >
            {{ item.name }}
          </button>
        </div>
      </div>
      <div class="states-time">
        <div>
          <span class="type-title">全部状态:</span>
        </div>
        <div style="width:90%;">
          <button
            type="button"
            class="btn-item"
            :class="{ isActive: stateChange == item.index }"
            v-for="item in states"
            :key="item.index"
            @click="statesItem(item)"
          >
            {{ item.type }}
          </button>
        </div>
      </div>
    </div>
    <Transaction />
  </Layout>
</template>

<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import Stat from "./widget";
import Stat2 from "./widget2";

import Transaction from "./transaction";

export default {
  components: {
    Layout,
    PageHeader,
    Stat,

    Transaction,
    Stat2,
  },
  data() {
    return {
      title: "计算资源",

      // 实例类型
      allSite: [
        {
          name: "全部",
          index: 1,
        },
        {
          name: " JEE服务器",
          index: 2,
        },
        {
          name: "MySQL",
          index: 3,
        },
        {
          name: "ElasticSearch",
          index: 4,
        },
        {
          name: "MongoDB",
          index: 5,
        },
        {
          name: "ClickHouse",
          index: 6,
        },
        {
          name: "Redis",
          index: 7,
        },
        {
          name: "kafka",
          index: 8,
        },
        {
          name: "vmware",
          index: 9,
        },
        {
          name: "中间件",
          index: 10,
        },
      ],
      siteChange: 1,
      // 运行环境
      states: [
        {
          type: "全部",
          index: 1,
        },{
          type: "测试环境",
          index: 2,
        },
        {
          type: "正式环境",
          index: 3,
        },
      ],
      stateChange: 1,
      // 7天内信源失效率走势
      splineAreaChart: {
        series: [
          {
            name: "CPU",
            data: [120, 132, 101, 134, 90, 230, 210, 131, 155, 95, 130, 160, 142],
          },
          {
            name: "内存",
            data: [220, 182, 191, 234, 290, 330, 310, 200, 230, 220, 151, 155, 122],
          },
          {
            name: "磁盘",
            data: [150, 232, 201, 154, 190, 330, 310, 160, 240, 260, 181, 125, 145],
          },
          {
            name: "网络",
            data: [320, 332, 301, 334, 390, 330, 320, 220, 330, 230, 281, 295, 244],
          },
          {
            name: "JVM",
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1290, 1150, 1220, 1151, 1324, 1132],
          },
        ],
        chartOptions: {
          legend: {
            show: true,
            position: "top",
            horizontalAlign: "center",
          },
          chart: {
            stacked: false,
            toolbar: {
              show: false,
            },
            animations: {
              enabled: false
            },
          },
          dataLabels: {
            enabled: false,
          },
          stroke: {
            curve: "straight",
            width: 3,
          },
          colors: [
            "rgb(84, 112, 198)",
            "rgb(145, 204, 118)",
            "rgb(250, 200, 88)",
            "rgb(238, 102, 102)",
            "rgb(115, 192, 222)",
          ],
          xaxis: {
            categories: ["00:00","02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
          },
          grid: {
            borderColor: "#f1f1f1",
          },
        },
      },
    };
  },
  methods: {
    // 跳转添加信源
    addSeed() {
      this.$router.push({
        name: "AddSeed",
      });
    },
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    //类型筛选
    statesItem(item) {
      this.stateChange = item.index;
    },
  },
  created () {
    let arr = []
    for (let i = 0; i <= 12; i++) {
      var day1 = new Date();
      day1.setTime(day1.getTime()-(i*2)*60*60*1000);
      var hours = day1.getHours()>9?day1.getHours():'0'+day1.getHours();
      var s1 = hours + ":00"
      arr.unshift(s1)
    }
    this.splineAreaChart.chartOptions.xaxis.categories = arr
  }
};
</script>
<style lang="scss" scoped>
.seedTitle {
  font-size: 15px;
  color: #000000;
  font-weight: 600;
}
input,
.multiselect {
  width: 350px;
  height: 40px;
}
input {
  // border: 1px solid #ced4da !important;
  outline: none;
  border-radius: 5px;
}
.duoxuan {
  display: flex;
  justify-content: space-between;
}
.tijiao {
  width: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.form-group {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
  input {
    &:nth-child(2) {
      float: right;
    }
  }
  .basic-title,
  .extend-title {
    display: inline-block;
    border-bottom: 1px solid #bbb;
    font-size: 16px;
  }
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.seedfrist {
  margin-top: 0px !important;
}
.seedbody {
  margin-bottom: 0px;
  margin-top: 0px !important;
}
// 走势图
.sparklines {
  margin-top: 20px;
  font-size: 17px;
  color: #343a40;
}
.count {
  .title {
    font-size: 15px;
    font-weight: bold;
  }
  .zhankai {
    float: right;
    img {
      vertical-align: middle;
      width: 20px;
      padding-right: 10px;
    }
  }
}
.all-products {
  font-size: 15px;
  font-weight: bold;
}
.isActive {
  color: #3c3e49;
  background-color: #e3e4e8;
}
button{
  border-radius: 0.2rem;
  background-color: #ffffff;
}
.states-type,.states-time {
  display:flex;
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
}
.states-time {
  margin-top:0;
}
.btn-item {
  font-size: 12px;
  margin-left: 10px;
  padding: 0.1rem 0.25rem;
  border: 0;
  margin-bottom: 20px;
  vertical-align: top;
  &:hover {
    cursor: pointer;
  }
}

.card-body {
  padding-bottom: 0;
}
</style>